<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能对话助手 - 简化版</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>智能对话助手</h1>
            <p>基于DeepSeek + MCP服务器 + 实时通信</p>
            <div class="features">
                <span class="feature-tag">🤖 DeepSeek AI</span>
                <span class="feature-tag">🔧 MCP工具</span>
                <span class="feature-tag">⚡ 实时响应</span>
            </div>
        </header>

        <div class="chat-container">
            <div class="chat-messages" id="chatMessages">
                <div class="message assistant">
                    <div class="message-content">
                        <p>你好！我是基于DeepSeek和MCP服务器的智能助手，可以帮你：</p>
                        <ul>
                            <li><strong>🌍 查询世界时间</strong> - 支持全球主要城市的实时时间查询</li>
                            <li><strong>🧮 数学计算</strong> - 支持基本运算、平方根、幂运算等</li>
                            <li><strong>💬 智能对话</strong> - 基于DeepSeek大模型的自然语言理解</li>
                            <li><strong>⚡ 实时通信</strong> - WebSocket + HTTP双重保障</li>
                        </ul>
                        <p>请问有什么可以帮助你的吗？</p>
                    </div>
                    <div class="message-time" id="currentTime"></div>
                </div>
            </div>

            <div class="chat-input-container">
                <div class="input-group">
                    <input type="text" id="messageInput" placeholder="请输入你的问题..." maxlength="500">
                    <button id="sendButton">发送</button>
                </div>
                <div class="input-actions">
                    <button id="clearButton" class="secondary">清除历史</button>
                    <span class="connection-status" id="connectionStatus">连接中...</span>
                </div>
            </div>
        </div>
    </div>

    <div class="examples">
        <h3>💡 示例问题：</h3>
        <div class="example-buttons">
            <button class="example-btn" data-message="现在北京时间是几点？">🕐 北京时间</button>
            <button class="example-btn" data-message="纽约现在几点了？">🗽 纽约时间</button>
            <button class="example-btn" data-message="东京的当前时间">🗾 东京时间</button>
            <button class="example-btn" data-message="计算 15 + 27">➕ 简单加法</button>
            <button class="example-btn" data-message="100 除以 4 等于多少？">➗ 除法计算</button>
            <button class="example-btn" data-message="16的平方根是多少？">√ 平方根</button>
            <button class="example-btn" data-message="2的3次方">^ 幂运算</button>
            <button class="example-btn" data-message="你好，介绍一下你自己">👋 自我介绍</button>
        </div>
    </div>

    <div class="tech-info">
        <h4>🔧 技术架构：</h4>
        <div class="tech-stack">
            <span class="tech-item">Go + Gin</span>
            <span class="tech-item">DeepSeek API</span>
            <span class="tech-item">MCP Protocol</span>
            <span class="tech-item">WebSocket + HTTP</span>
            <span class="tech-item">Redis Storage</span>
            <span class="tech-item">智能工具调用</span>
        </div>
    </div>

    <script>
        console.log('页面开始加载简化版JavaScript...');
    </script>
    <script src="/static/app-simple.js"></script>
</body>
</html>
